<template>
  <div id="app" style="" class="charts">
    <div class="chartBox fl">
      <div class="overview_parent " style="overflow: hidden">
        <p>用户概述</p>
        <ul style="border-top:1px solid #F2F2F2">
          <li class="overview_item">
            <div class="overview_item_content" id="overview_sum">
              <span class="overview_item_title">总用户数</span>
              <span class="overview_item_text" style="border-top: 1px solid #f29f97;">{{usertotal}}<small style="font-size: 30px;">人</small></span>
            </div>
          </li>
          <li class="overview_item">
            <div class="overview_item_content" id="overview_new">
              <span class="overview_item_title">新增用户数</span>
              <span class="overview_item_text" style="border-top: 1px solid #88d75e;">{{dayUserCount}}<small style="font-size: 30px;">人</small></span>
            </div>
          </li>
          <li class="overview_item">
            <div class="overview_item_content" id="overview_act">
              <span class="overview_item_title">活跃用户数</span>
              <span class="overview_item_text" style="border-top: 1px solid #e7ae7d;">{{activeUserCount}}<small style="font-size: 30px;">人</small></span>
            </div>
          </li>
          <li class="overview_item">
            <div class="overview_item_content" id="overview_die">
              <span class="overview_item_title">沉默用户数</span>
              <span class="overview_item_text" style="border-top: 1px solid #d1d2d0;">{{unActiveUserCount}}<small style="font-size: 30px;">人</small></span>
            </div>
          </li>
          <li class="overview_item">
            <div class="overview_item_content" id="overview_audit">
              <span class="overview_item_title">提现待处理</span>
              <span class="overview_item_text" style="border-top: 1px solid #80bdef;">0<small style="font-size: 30px;">人</small></span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="chartBox fr">
      <div class="overview_parent ">
        <p>用户数量</p>
        <div id="map" class="echrats_map" style="height: 450px;border-top: 1px solid #F2F2F2">

        </div>
      </div>
    </div>
    <div class="clear"></div>
    <div class="chartBox fl">
      <div class="overview_parent">
        <p>用户年龄</p>
        <div id="ageuality" style=" height: 450px;border-top: 1px solid #F2F2F2">

        </div>
      </div>
    </div>
    <div class="chartBox fr">
      <div class="overview_parent">
        <p>用户性别</p>
        <div id="sexuality" style=" height: 450px;border-top: 1px solid #F2F2F2">

        </div>
      </div>
    </div>
    <div class="clear"></div>
    <div style="padding-top:3px;width:100%;background: #fff;border-radius: 10px;">
      <div class="sex_parent">
        <p>用户全国分布图</p>
        <div id="china_map" style=" height: 500px;border-top: 1px solid #F2F2F2">

        </div>
      </div>
    </div>
  </div>
</template>
<script>
  let echarts = require('echarts');
  import {
    mapActions,
    mapState
  } from 'vuex'
  export default {
    name: 'charts',
    data() {
      return {
        title: '用户统计',
        usertotal: '',
        dayUserCount: '',
        activeUserCount: '',
        unActiveUserCount: '',
        man: '',
        woman: '',
        qita: '',
      }
    },
    created: function () {
      this.userCount()
    },
    methods: {
      userCount() {
        var self = this
        self.$store.commit('showLoading');
        this.userCountlist({
          token: sessionStorage.token
        }).then((data) => {
          self.$store.commit('hiddenLoading');
          console.log(data)
          if (data.code == 200) {
            this.usertotal = data.data.userCount
            console.log(this.usertotal)
            this.dayUserCount = data.data.dayUserCount
          } else {
            this.$message('获取用户数量数据失败')
          }
        });
        this.useractivelist({
          token: sessionStorage.token
        }).then((data) => {
          console.log(data)
          if (data.code == 200) {
            this.activeUserCount = data.data.activeUserCount
            this.unActiveUserCount = data.data.unActiveUserCount
          } else {
            this.$message('获取活跃用户数据失败')
          }
        });
        this.usersexlist({
          token: sessionStorage.token
        }).then((data) => {
          console.log(data, '性别')
          if (data.code == 200) {
            self.man = data.data.Data[0].value
            self.woman = data.data.Data[1].value
            self.qita = data.data.Data[2].value
            var sexuality = echarts.init(document.getElementById('sexuality'));
            sexuality.setOption({
              // title : {
              //   text: '性别比例',
              //   x:'center'
              // },
              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
               color:['#95caff','#fc9e9e','#e4e7e3'],
              legend: {
                orient: 'vertical',
                left: '10px',
                bottom:'25px',
                data: ['男', '女', '其他']
              },
              series: [
                {
                  name: '访问来源',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '48%'],
                  data: [
                    { value: self.man, name: '男' },
                    
                    { value: self.woman, name: '女' },
                    { value: self.qita, name: '其他' },
                  ],
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            });
          } else {
            this.$message('获取性别数据失败')
          }
        });
        this.provicelist({
          token: sessionStorage.token
        }).then((data) => {
          console.log(data, '省份')
          if (data.code == 200) {
            var china_map = echarts.init(document.getElementById('china_map'));
            china_map.setOption({
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: '10px;',
                bottom:'50px',
                data: ['用户']
              },
              series: [
                {
                  name: '用户',
                  type: 'map',
                  mapType: 'china',
                  label: {
                    normal: {
                      show: true
                    },
                    emphasis: {
                      show: true
                    }
                  },
                  data: data.data.Data
                }
              ]
            })
          } else {
            this.$message('获取省份数据失败')
          }
        });
        this.useragelist({
          token: sessionStorage.token
        }).then((data) => {
          console.log(data, '年龄')
          if (data.code == 200) {
            var ageuality = echarts.init(document.getElementById('ageuality'));
            ageuality.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'line',        // 默认为直线，可选为：'line' | 'shadow'
                  lineStyle: {
                    color: '#F0F0F0'
                  }
                },
                position: function (pt) {
                  return [pt[0], '10%'];
                }
              },
              legend: {
                top: 'bottom',
                data: ['意向']
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.data.XData
              },
              yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                  show: false
                },
              },
              dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
              }, {
                start: 0,
                end: 10,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                handleStyle: {
                  color: '#fff',
                  shadowBlur: 3,
                  shadowColor: 'rgba(0, 0, 0, 0.6)',
                  shadowOffsetX: 2,
                  shadowOffsetY: 2
                }
              }],
              series: [
                {
                  name: '用户数',
                  type: 'line',
                  smooth: true,
                  symbol: 'none',
                  sampling: 'average',
                  itemStyle: {
                    normal: {
                      color: '#ffdbdb'
                    }
                  },
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#fea2a2'
                      }, {
                        offset: 1,
                        color: '#ffdbdb'
                      }])
                    }
                  },
                  data: data.data.Data
                }
              ]
            })
          } else {
            this.$message('获取年龄数据失败')
          }
        });
      },
...mapActions(['userCountlist','useractivelist','usersexlist','provicelist','useragelist'])
    },
    mounted() {
      // var self = this
      // var m = this.man
      console.log(this.man, '212121212')
      var map = echarts.init(document.getElementById('map'));
      map.setOption({
        color: ['#ffbcbc'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'line',        // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#F0F0F0'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
          },

        ],
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
              offset: 0,
              color: '#fc9191'
            }, {
              offset: 1,
              color: '#ffc9c9'
            }]),
            barBorderRadius: [10, 10, 5, 5]
          }
        },
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '30%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      });


    }
  }

</script>
<style>
#ageuality>div canvas{
  left: -28px!important;
}
   div,
  ul,
  li {
    margin: 0;
    padding: 0;
  }
  
  li {
    list-style: none!important;
  }
  
  .fl {
    float: left
  }
  
  .fr {
    float: right
  }
  
  .overview_item {
    margin: 0 11px;
    float: left;
    width: 45%;
    height: 127px;
    margin-top: 18px;
  }
  
  #overview_sum {
    background: -webkit-gradient(linear, -8% 3%, 0% 100%, from(#ffbdac), to(#fca6a1));
  }
  
  #overview_new {
    background: -webkit-gradient(linear, -8% 3%, 0% 100%, from(#beea78), to(#8de067));
  }
  
  #overview_act {
    background: -webkit-gradient(linear, -8% 3%, 0% 100%, from(#feceb9), to(#ebaf76));
  }
  
  #overview_die {
    background: -webkit-gradient(linear, -8% 3%, 0% 100%, from(#e3e6e2), to(#d7d8d5));
  }
  
  #overview_audit {
    background: -webkit-gradient(linear, -8% 3%, 0% 100%, from(#a4d9f9), to(#7ebefe));
  }
  
  .overview_item_content {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    position: relative
  }
  
  .overview_item_title {
    line-height: 41px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    left: 16px;
  }
  
  .overview_item_text {
    position: absolute;
    color: #FFFFFF;
    font-size: 50px;
    right: 35px;
    margin-top: 38px;
    left: 0;
    right: 0;
    line-height: 81px;
  }
  
  .sex_parent {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    height: 500px;
  }
  
  .chartBox {
    width: 50%;
    height: 500px;
    border:6px solid #fcf9f9;
    box-sizing: border-box;
    background: #fff;
    border-radius: 15px;
  }
  
  .overview_parent {
    width: 90%;
    height: 100%;
    overflow: hidden;
    margin-left: 50px;
  }
  
  .sex_parent p,.overview_parent p {
    text-align: left;
    font-weight: bold;
    border-left: 4px solid #FB9D9D;
    margin-left: 11px;
    font-size: 20px;
    margin-top: 10px;
    padding-left: 5px;
  }
</style>